<template>
    <div class="tool" :style="y > 0 ? show : ''">
        <div class="item" v-if="route.meta.title == '记录'" @click="handleSide">
            <svg-icon icon-class="heng" size="0.6rem"></svg-icon>
        </div>
        <div class="item" v-if="commentShow(route.meta.title as string)" @click="handleToComment">
            <svg-icon icon-class="comments" size="0.5rem"></svg-icon>
        </div>
        <div class="item" @click="handleBackToTop" style="margin-top:0.2rem">
            <svg-icon icon-class="up" size="0.4rem"></svg-icon>
            <span class="count">{{ process }}%</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import useStore from "@/store";
import {useEventListener, useScroll} from "@vueuse/core";

const route = useRoute();
const process = ref(0);
const show = reactive({
    transform: "translateX(-45px)"
});
const {y} = useScroll(window);
const {app} = useStore();
const commentList = ["记录", "题目"];
const commentShow = computed(() => (value: string) => commentList.includes(value));

useEventListener(document, "scroll", () => {
    process.value = Number(
        ((window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100).toFixed(0)
    );
    process.value = process.value > 100 ? 100 : process.value;
});
const handleSide = () => {
    app.sideFlag = !app.sideFlag;
};
const handleToComment = () => {
    document.getElementById("reply-wrap")?.scrollIntoView({
        block: "start",
        inline: "nearest",
        behavior: 'smooth'
    });
}
const handleBackToTop = () => {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
};

</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";

.tool {
  position: fixed;
  right: -0.7rem;
  bottom: 1.2rem;
  z-index: 10;
  color: var(--main-1);
  transition: all 0.5s;
  border-radius: 0.15rem;
  box-shadow: 0 0 0.06rem 0.03rem var(--box-shadow);
  backdrop-filter: blur(0.2rem) saturate(150%);

  .item {
    @include flex;
    flex-direction: column;
    gap: 0.1rem;
    width: 0.8rem;
    opacity: 0.7;
    cursor: url(@/assets/cursor/pin.cur), default !important;
    transition: all 0.2s ease-in-out 0s;

    .count {
      font-size: 0.2rem;
      font-weight: bold;
      text-align: center;
    }

    &:hover {
      opacity: 1;
    }
  }
}
</style>